<template>
  <div class="comments">
    <a-divider>评论</a-divider>
    <p class="w-pointer comments-btn">
      <span @click="commentsClick('WInput')"><a-icon type="edit" />&nbsp;添加评论</span>
    </p>
    <w-input ref="WInput" :api="api" @reload="$emit('reload')" />
    <a-comment v-for="item in commentsList" :key="item._id">
      <template slot="actions">
        <span key="comment-basic-reply-to" @click="commentsClick(`WInput_${item._id}`)">回复</span>
        <w-input
          :ref="`WInput_${item._id}`"
          :key="`WInput_${item._id}`"
          :api="api"
          :comment-id="item._id"
          padding-top
          :mention="item.name"
          @reload="$emit('reload')"
        />
      </template>
      <a slot="author">
        {{ item.name }}
      </a>
      <a-avatar
        slot="avatar"
        :src="item.icon"
        alt="Han Solo"
      />
      <p slot="content" class="content">
        {{ item.content }}
      </p>
      <a-tooltip slot="datetime" :title="item.date | DateFormat">
        <span>{{ item.date | DateFormat }}</span>
      </a-tooltip>
      <a-icon
        v-if="checkIsShowClearBtn(item)"
        class="close-icon w-pointer"
        type="close"
        @click="removeClick(item)"
      />
      <a-comment v-for="subItem in item.children" :key="subItem._id">
        <template slot="actions">
          <span key="comment-basic-reply-to" @click="commentsClick(`WInput_${subItem._id}`)">回复</span>
          <w-input
            :ref="`WInput_${subItem._id}`"
            :key="`WInput_${subItem._id}`"
            :api="api"
            :comment-id="item._id"
            padding-top
            :mention="item.name"
            @reload="$emit('reload')"
          />
        </template>
        <a slot="author">
          {{ subItem.name }}
        </a>
        <a-avatar
          slot="avatar"
          :src="subItem.icon"
          alt="Han Solo"
        />
        <p slot="content" class="content">
          <span class="mention">@{{ subItem.mention }}&nbsp;</span>{{ subItem.content }}
        </p>
        <a-tooltip slot="datetime" :title="subItem.date | DateFormat">
          <span>{{ subItem.date | DateFormat }}</span>
        </a-tooltip>
        <a-icon
          v-if="checkIsShowClearBtn(subItem)"
          class="close-icon w-pointer"
          type="close"
          @click="removeClick(subItem, item._id)"
        />
      </a-comment>
    </a-comment>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator'
import { Getter, State } from 'vuex-class'
import CommentsModel from '@/models/comments'
import WInput from './input'

@Component({
  name: 'ComGlobalComments',
  components: {
    WInput
  }
})
export default class Com extends Vue {
  @Prop({ type: String }) api!: string
  @Prop({ type: Array, default: () => ([]) }) commentsList!: Array<CommentsModel>
  @State('oauth') OAuth: any
  @Getter('auth/IS_LOGIN') isLogin!: boolean

  // 评论按钮点击
  commentsClick (ref: string) {
    const dom = this.$refs[ref] as any
    (Array.isArray(dom) ? dom[0] : dom).show()
  }

  // 校验是否显示删除按钮
  checkIsShowClearBtn (model: CommentsModel) {
    return model.children.length === 0 && (this.isLogin || this.OAuth.userId === model.userId)
  }

  // 删除数据
  removeClick (item: CommentsModel, superCommentId: string) {
    this.$confirm({
      title: '删除评论?',
      content: `确定要删除【${item.content}】评论吗？`,
      onOk: async () => {
        await this.$wAxios.$delete(this.api, item._id, {
          superCommentId,
          dataId: this.$route.params.id
        })
        this.$message.success('删除成功')
        this.$emit('reload')
      }
    })
  }
}
</script>

<style lang="less">
.comments {
  .comments-btn {
    font-size: 16px;
    color: #b0b0b0;
  }

  .comments-btn:hover {
    color: #999;
  }

  .content {
    margin: 0;
  }
  .ant-comment-actions {
    margin: 0;
    li {
      display: block;
    }
  }
  .mention {
    color: #0681d0;
  }
  .close-icon {
    position: absolute;
    right: 0;
    top: 18px;
    color: #b0b0b0;
  }

  .close-icon:hover {
    color: #999;
  }
}
</style>
